import { isEmpty } from './index'

export const TableColumnRender = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    column: Object
  },
  render: (h, data) => {
    if (data.props.render) {
      const vnode = data.props.render(h, {
        row: data.props.row,
        column: data.props.column
      })
      let title = ''
      if (vnode.children && vnode.children[0].text) {
        title = vnode.children[0].text
      }
      return (
        <div style='cursor: default; overflow: hidden; text-overflow: ellipsis;' title={title}>
          {vnode}
        </div>
      )
      // return data.props.render(h, {
      //   row: data.props.row,
      //   column: data.props.column
      // })
    } else {
      return (
        <span style='cursor: default; overflow: hidden; text-overflow: ellipsis;' title={data.props.row[data.props.column.key] || '-'}>
          {isEmpty(data.props.row[data.props.column.key]) ? '-' : data.props.row[data.props.column.key]}
        </span>
      )
    }
  }
}
